import React, {Component} from 'react';

import { connect } from 'react-redux'
import * as movieAction from '../../actions/actions.js'


import MovieTable from './MovieTable.jsx';
import Movie from './Movie.jsx';

import { Button , message , Spin } from 'antd';



class MovieIndex extends Component {
    constructor(props) {
        super(props);
        //初始化 数据结构
        this.state = {
            movie: {
                show: false,
                todo: '',
                text: '',
                data: {
                    key: '',
                    name: '',
                    synopsis: ''
                }
            }
        };
    }


    //重置ui状态
    resetState() {
        this.setState({
            movie: {
                show: false,
                todo: '',
                text: '',
                data: {
                    key: '',
                    name: '',
                    synopsis: ''
                }
            }
        })
    }

    //新增功能  显示组件 组件内容为空
    showModal() {
        this.setState({
            movie: {
                show: true,
                todo: 'add',
                text: '新增电影',
                data: {
                    key: '',
                    name: '',
                    synopsis: ''
                }
            }
        })
    }

    //1.初始化数据 2.页面切换 刷新数据
    componentWillMount(){
        let { dispatch } = this.props;
        dispatch(movieAction.getInitData());
    }

    //修改功能  显示组件 组件内容为空
    showUpdataModal(num) {
        //匹配到要修改的数据

        let movielist = this.props.movieData.data;
        let element;
        for (let index = 0; index < movielist.length; index++) {

            element = movielist[index];

            if (element.key == num) {
                break;
            }
        }

        //讲数据装载
        this.setState({
            movie: {
                show: true,
                todo: 'updata',
                text: '修改电影',
                data: element
            }
        })
    }

    //关闭组件 并内容清空
    closeModal() {
        this.resetState();
    }


    //点击确定按钮
    doClick(form) {
        let { dispatch } = this.props;
        //新增一条数据
        if (this.state.movie.todo == 'add') {
            dispatch(movieAction.addMovie(form));
            message.success('新增成功！');
        }
        //修改一条数据
        if (this.state.movie.todo == 'updata') {
            dispatch(movieAction.updataMovie(form));
            message.success('修改成功！');
        }
        this.resetState();
    }


    //删除一条数据
    remData(index) {
        let { dispatch } = this.props;
        dispatch(movieAction.remoMovie(index));
        message.success('删除成功！');
    }

    render() {
        return (
            <div>
                <br />
                {/** 新增电影按钮 */}
                <Button type="primary" onClick={this.showModal.bind(this) }>新增电影</Button>

                <br />
                {/** 电影 */}
                <Movie
                    uiData={this.state.movie}
                    close={this.closeModal.bind(this) }
                    doClick={this.doClick.bind(this) }
                    />

                {/** 表格 */}
                <br />

                <MovieTable
                    data={this.props.movieData.data}
                    doUpdata={this.showUpdataModal.bind(this) }
                    remData={this.remData.bind(this) }
                    />
                <Spin spinning={this.props.movieData.load} size="large" tip="正在刷新数据..."/>
            </div>
        );
    }
}

function select(state) {
    return {
        movieData: state.movieData
    };
}


export default connect(select)(MovieIndex);